<template>
  <div class="project zy-content ">
    <div class="title">
      <span>设备故障性质</span>
      <div class="icon">
        <span class="creatBtnright" @click="handleAdd" v-if="checkBtnPermission.workorderFaultNatureAdd">
          <span><Icon type="ios-add-circle" color="#187BDB" /></span>
          <span class="rightbtn">添加故障</span>
        </span>
      </div>
    </div>
    <Form :label-width="100" class="search-form">
        <Row>
          <Col :span="span">
            <FormItem label="故障代码：">
              <Input type="text" v-model="searchParams.faultCode" clearable :placeholder="`${$t('common.inputInfo')}`" class="inputBorder" :maxlength="32"></Input>
            </FormItem>
          </Col>
          <Col :span="span">
            <FormItem label="故障性质：">
              <Input type="text" v-model="searchParams.faultName" clearable :placeholder="`${$t('common.inputInfo')}`" class="inputBorder" :maxlength="32"></Input>
            </FormItem>
          </Col>
          <Col :span="span">
            <FormItem label="故障描述：">
              <Input type="text" v-model="searchParams.faultDesc" clearable :placeholder="`${$t('common.inputInfo')}`" class="inputBorder" :maxlength="32"></Input>
            </FormItem>
          </Col>
          <Col :span="span" align="center">
            <Button type="primary" @click="changeNum" v-if="checkBtnPermission.workorderFaultNatureList">{{$t('common.Query')}}</Button>
          </Col>
        </Row>
      </Form>
      <div class="tableContent">
          <Table class="recycleBinTable" ellipsis ref="selection" :columns="columns" :data="data"  @on-selection-change="onSelectChange">
              <template slot-scope="{ row }" slot="action">
                  <span class="operationBtn" @click="handleDelete(row)" v-if="checkBtnPermission.workorderFaultNatureDel">{{$t('common.Delete')}}</span>
                  <span class="operationBtn" @click="handleEdit(row)" v-if="checkBtnPermission.workorderFaultNatureEdit">{{$t('common.Edit')}}</span>
              </template>
          </Table>
      </div>
      <div class="pageWrap">
            <Page :total="total" :page-size="pageSize" :page-size-opts="pageSizeOption" :current="pageNum" @on-change="changePageNum" @on-page-size-change="changePageSize" show-sizer show-total />
      </div>
      <!--故障性质模态框-->
      <malfunction-modal ref="malfunctionModal" @refresh="handleRefresh"/>
      <Modal :mask-closable="false"
              v-model="delelteVisible"
              title="">
          <Row class="enableContent">
              <Col span="24" class="enableContentInner">
                  <img width="95px" src="~images/event/del.png" alt="">
              </Col>
              <Col span="24" class="enableTips">
                  <span>{{$t('common.sureDelete')}}</span>
              </Col>
          </Row>
          <div slot="footer">
              <Button type="default"  @click="delelteVisible = false">{{$t('common.Cancle')}}</Button>
              <Button type="primary" :loading="delLoading" @click="handleDeleteOk">{{$t('maintenance.Confirmed')}}</Button>
          </div>
      </Modal>
  </div>
</template>

<script>
    import malfunctionModal from './modules/malfunctionModal'
    export default {
      name: "recycleBin",
      components: {
          malfunctionModal
      },
      mounted() {
          let itemList = JSON.parse(window.localStorage.getItem('USER_URI'))
          for(let item of itemList){
              if(item.code=="workorderFaultNatureAdd"){
                  this.checkBtnPermission.workorderFaultNatureAdd = true
              }
              if(item.code=="workorderFaultNatureEdit"){
                  this.checkBtnPermission.workorderFaultNatureEdit = true
              }
              if(item.code=="workorderFaultNatureDel"){
                  this.checkBtnPermission.workorderFaultNatureDel = true
              }
              if(item.code=="workorderFaultNatureList"){
                  this.checkBtnPermission.workorderFaultNatureList = true
              }
          }
      },
      data() {
        return {
            delId: '',
            delLoading: false,
            delelteVisible: false,
            pageNum:1,
            pageSize:10,
            total:0,
            pageSizeOption: [10,20,30,40],
            span: 6,
            searchParams: {},
            checkBtnPermission: {},
            columns: [
                {
                    title: '故障代码',
                    key: 'faultCode',
                    align: 'center',
                    minWidth: 200,
                },
                {
                    title: '故障性质',
                    key: 'faultName',
                    align: 'center',
                    minWidth: 200,
                },
                {
                    title: '故障描述',
                    key: 'faultDesc',
                    align: 'center',
                    minWidth: 300,
                },
                {
                    title: '创建人',
                    key: 'realname',
                    align: 'center',
                    minWidth: 200,
                },
                {
                    title: '创建时间',
                    key: 'createTime',
                    align: 'center',
                    minWidth: 200,
                },
                {
                    title: `${ this.$t('common.operation') }`,
                    slot: "action",
                    minWidth: 200,
                    align: 'center',
                    fixed: 'right'
                },
            ],
            data: [],
        }
      },
      created() {
          this.changeNum()
      },
      methods: {
          //新增
          handleAdd() {
              this.$refs.malfunctionModal.show('add')
          },
          handleDelete(record) {
              this.delelteVisible = true
              this.delId = record.id
          },
          //编辑
          handleEdit(record) {
              this.$refs.malfunctionModal.show('edit',record)
          },
          onSelectChange() {

          },
          //刷新
          handleRefresh() {
              this.searchList()
          },
          //分页
          changeNum(){
              this.pageNum = 1;
              this.searchList();
          },
          changePageSize(pageSize) {
              this.pageSize = pageSize;
              this.searchList();
          },
          changePageNum(val){
              this.pageNum = val;
              this.searchList();
          },
          searchList(){//查询列表
              let params = {
                  pageNo: this.pageNum,
                  pageSize: this.pageSize,
              };
              for (let key in this.searchParams) {
                  if (this.searchParams[key]) {
                      this.$set(params, key, this.searchParams[key])
                  }
              }
              // if(this.searchParams.status==3){
              //   params.status = 0
              // }
              // if(this.dateList[1]){
              //     params.startTime = this.$moment(this.dateList[0]).format('YYYY-MM-DD');
              //     params.endTime = this.$moment(this.dateList[1]).format('YYYY-MM-DD');
              // }
              this.axios({
                  method: 'get',
                  url: '/workorder/workorderFaultNature/list',
                  params: params
              }).then(res => {
                  if(res.code === 200){
                      this.data = res.data.record
                      this.total = res.data.total
                  }else{
                      this.$Message.warning(({content:res.msg,duration:6,closable:true}));
                  }
              })
          },
          handleDeleteOk() {
              this.axios({
                  method: 'delete',
                  url: '/workorder/workorderFaultNature/del',
                  data: {
                      id: this.delId
                  }
              }).then(res => {
                  
                  if(res.code === 200){
                      this.searchList()
                      this.$Message.success('删除成功！')
                  }else{
                      this.$Message.warning(({content:res.msg,duration:6,closable:true}));
                  }
              }).finally(() => {
                  this.delelteVisible = false
              })
          }
      }
}
</script>

<style scoped lang="scss">
  .project{
    //background: #ffffff;
    height: calc(100vh - 150px);
    .title{
      display: flex;
      justify-content: space-between;
      font-size: 20px;
      padding: 10px;
      border-bottom: 1px solid #dddddd;
      .icon {
        display: flex;
         .creatBtnright {
          display: flex;
          align-items: center;
          font-size: 16px;
          i {
            font-size: 36px;
          }
        }
      }
    }
  }

</style>
